<!--  -->
<template>
  <div>
    <el-table :data="goodsList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column
          property="images"
          label="图标"
           width="130">
          <template slot-scope="scope">
      　　　　<img :src="scope.row.images" class="headimag"/>
      　　</template>
        </el-table-column>
        <el-table-column label="商品名称" prop="spuName"></el-table-column>
        <el-table-column
          prop="publishStatus"
          header-align="center"
          align="center"
          label="上架状态" width="200">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.publishStatus"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff0000"
              active-text="上架"
              inactive-text="下架"
              @change="handelChange(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="商品价格(元)" prop="price" width="120px"></el-table-column>
        <el-table-column label="商品重量" prop="weight" width="100px"></el-table-column>
        <el-table-column label="商品库存" prop="stockCount" width="100px"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini"
            @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeById(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
    </el-table>
     <!-- 修改商品的对话框 -->
    <el-dialog
      title="修改商品信息"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
    >
      <!-- 内容主体 -->
      <el-form
        :model="editUserForm"
        ref="editUserFormRef"
        :rules="editUserFormRules"
        label-width="120px"
      >
        <el-form-item label="商品名称" prop="spuName" >
          <el-input v-model="editUserForm.spuName"  disabled ></el-input>
        </el-form-item>
        <el-form-item label="商品价格(元)" prop="price">
          <el-input v-model="editUserForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品重量(kg)" prop="weight">
          <el-input v-model="editUserForm.weight"></el-input>
        </el-form-item>
        <el-form-item label="商品库存" prop="stockCount">
          <el-input v-model="editUserForm.stockCount"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["goodsList"],
  data () {
    return {
      
      // 控制商品修改对话框
      editDialogVisible: false,
      editUserFormRules:{
        // spuName: [
        //    { required: true, message: '商品名不能为空', trigger: 'blur' },
        //   ],
        stockCount: [
           { required: true, message: '库存不能为空', trigger: 'blur' },
          ],
        price: [
           { required: true, message: '价格不能为空', trigger: 'blur' },
          ],
        weight: [
           { required: true, message: '重量不能为空', trigger: 'blur' },
          ],
        },
      editUserForm: {},
    };
  },
  methods: {
    // 通过Id删除商品
    async removeById (id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该商品, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除！')
      }
      const { data: res } = await this.$http.post('/xuanmall/spumessage/delete' ,[id])
      if (res.code !== 0) {
        return this.$message.error('删除商品失败！')
      }
      this.$message.success('删除商品成功！')
      this.$emit('getGoodsList'); 
    },
    // 编辑商品信息
    async showEditDialog (row) {
      this.editUserForm = row
      this.editDialogVisible = true
    },
    // 监听修改商品对话框的关闭事件
    editDialogClosed () {
      this.$refs.editUserFormRef.resetFields()
    },
    // 修改商品信息
    async  editUser () {
      console.log(this.editUserForm)
      const {data:res} = await this.$http.post('/xuanmall/spumessage/update',this.editUserForm)
      console.log("修改",res)
      if(res.code !== 0)return this.$message.error("修改失败")
      this.$message.success("修改成功")
      this.$emit('getGoodsList');
       this.editDialogVisible = false
    },
    // 修改状态
    async handelChange(val){
    console.log(val)
      const {data:res} = await this.$http.post('/xuanmall/spumessage/update',{
        id:val.id,
        publishStatus:val.publishStatus
      })
      // console.log("状态修改",res)
      if(res.code !== 0)return this.$message.error("状态修改失败")
      this.$message.success("状态修改成功")
      this.$emit('getGoodsList');
    }

  }
}

</script>
<style lang='less' scoped>
.headimag{
  height: 100px;
  width: 100px;
}
</style>